<div class="g-top-button-group">
    <button class="btn btn-secondary mr-3" (click)="back()">返回</button>
    <button class="btn btn-primary" autofocus (click)="submit()">保存</button>
</div>
<div class="row">
    <div class="col-12">
        <m-card [hideHead]="true">
            <div class="d-flex align-items-center">
                <span class="g-card-title">标注软件</span>
                <div class="selected" *ngIf="packages$ | async as pkgs">
                    <div>已选软件包：</div>
                    <div>
                        <button *ngFor="let pkg of pkgs" class="btn btn-sm btn-outline-info m-btn--pill" (click)="selection.unselect(pkg)">
              {{ pkg.package_name }}
            </button>
                    </div>
                </div>
            </div>
        </m-card>
    </div>
    <div class="col-lg-5">
        <m-card [autoHeight]="true">
            <div card-head>
                <m-key-search [label_text]="'搜索软件包'" #searchRef></m-key-search>
            </div>
            <ng-template #pleaseSearchRef>
                <div>请输入关键字搜索软件包</div>
            </ng-template>
            <ng-container *ngIf="searchRef.value; else pleaseSearchRef">
                <m-api-data-table [dataSource]="packageDataSource" [searchControl]="searchRef" [selection]="selection" [defaultOption]="{ keyword: searchRef.value }">
                    <ng-container mDataTableColumn header="ID">
                        <ng-template let-id="id">
                            <td>{{ id }}</td>
                        </ng-template>
                    </ng-container>
                    <ng-container mDataTableColumn header="软件包名">
                        <ng-template let-name="package_name">
                            <td>{{ name }}</td>
                        </ng-template>
                    </ng-container>
                    <ng-container mDataTableColumn header="源内版本">
                        <ng-template let-version="version">
                            <td>{{ version }}</td>
                        </ng-template>
                    </ng-container>
                </m-api-data-table>
            </ng-container>
        </m-card>
    </div>
    <div class="col-lg-7">
        <m-card [autoHeight]="true">
            <div card-head>
                <span>软件信息</span>
                <div class="form-group">
                    <select id="selected" class="form-control" [(ngModel)]="current">
            <option value="" hidden>请选择软件包</option>
            <option *ngFor="let pkg of packages$ | async" [value]="pkg.id">
              {{ pkg.package_name }}
            </option>
          </select>
                </div>
            </div>
            <div>
                <div *ngFor="let pkg of packages$ | async" [hidden]="current != pkg.id.toString()">
                    <div class="subtitle">源内信息</div>
                    <div class="row package_info">
                        <div class="col-4">包名：{{ pkg.package_name }}</div>
                        <div class="col-4">源内版本：{{ pkg.version }}</div>
                        <div class="col-4">架构：{{ pkg.architecture }}</div>
                        <div class="col-12">描述：{{ pkg.des }}</div>
                    </div>
                    <hr />
                    <div class="subtitle">自定义信息</div>
                    <form class="g-my-form was-validation" [class.submitted]="submitted" #formRef>
                        <input type="hidden" name="ids" [ngModel]="pkg.id" />
                        <div class="row">
                            <div class="col-lg-7">
                                <div class="form-group required">
                                    <select id="soft-type" name="stypes" class="form-control" ngModel required>
                    <option value="" hidden>选择软件类别</option>
                    <option *ngFor="let category of category$ | async" [value]="category.id">
                      {{ category.name }}
                    </option>
                  </select>
                                    <label for="soft-type">软件类别</label>
                                </div>
                                <div class="form-group required">
                                    <input id="soft-name" name="names" class="form-control" maxlength="10" ngModel required />
                                    <label for="soft-name">软件别名</label>
                                </div>
                                <div class="form-group">
                                    <input id="soft-remark" name="remarks" class="form-control" ngModel />
                                    <label for="soft-remark">软件备注</label>
                                </div>
                                <div class="form-group">
                                    <input id="soft-source" name="sources" class="form-control" ngModel />
                                    <label for="soft-source">软件来源</label>
                                </div>
                                <div class="form-group">
                                    <input id="soft-website" name="websites" class="form-control" ngModel />
                                    <label for="soft-website">软件官网</label>
                                </div>
                            </div>
                            <div class="col-lg-5 g-flex-center">
                                <m-image-preview class="icon-preview" [control]="input">
                                    <input type="file" accept="image/*" name="icons" class="form-control" ngModel hidden #input />
                                </m-image-preview>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </m-card>
    </div>
</div>